@section("header")
    <style>
        body {
            background: #f4f4f4;
        }

        .header {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 99;
            width: 100vw;
            padding: 1vh 0 0 0;
            /*height: 8vh;*/
            text-align: center;
            background: #fafafa;
        }

        .header-top {
            width: 100vw;
            padding: 0 1vw;
            height: 7vh;
            color: #666666;
            border-bottom: 1px solid #e9e9e9;
        }

        .htop_div {
            display: inline-block;
            float: left;
            font-size: 2rem;
            line-height: 7vh;
        }

        .htop_index, .htop_search, .htop_cart {
            height: 5vh;
            line-height: 5vh;
            font-size: 2.5rem;
            width: 9vw;
        }

        .htop-fa {
            margin-top: 0.6rem;
        }

        .htop_logo {
            width: 70vw;
            color: #ba3b3f;
        }

        .hot-active {
            border-bottom: 3px solid #ba3b3f !important;
        }

        .header-wp {
            width: 100vw;
            /*padding: 0 1vw;*/
            height: 6vh;
            background: #fafafa;
            border-bottom: 1px solid #e9e9e9;
        }

        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }

        .hots-bar {
            position: relative;
            height: 6vh;
            line-height: 6vh;
            font-size: 1.6rem;
            z-index: 999;
            text-align: center;
        }

        .hots-bar .hot {
            position: relative;
            margin: 0 2vw;
            padding: 0 2.5vw;
            display: inline-block;
            height: 100%;

        }

        .hots-bar .hot-all,
        .hots-bar .hot-more {
            position: absolute;
            top: 0;
            width: 90px;
            left: -90px;
            z-index: 3;
        }

        .hot-active {
            border-bottom: 3px solid #ba3b3f !important;
        }

        .hots-bar .hots-cnt {
            height: 100%;
            overflow: hidden;
            z-index: 2;
        }

        .hots-bar .hots-bd {
            white-space: nowrap;
            height: 100%;
            overflow-y: hidden;
        }

        .hots-bar .active:before {
            content: "";
            position: absolute;
            left: 7px;
            right: 7px;
            bottom: 0;
            height: 3px;
            background: #ba3b3f;
        }

        .hots-bar .hot-more {
            right: -47rem;
            left: auto;
            width: 47rem;
        }

        .hots-wp {
            height: 6vh;
        }

        .hots-wp .hot-all:after,
        .hots-wp .hot-more:after {
            content: "";
            position: absolute;
            right: -10px;
            top: 0;
            bottom: 0;
            width: 10px;
            background-image: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0) 55%);
        }

        .hots-wp .hot-more:after {
            left: -2px;
            right: auto;
            background-image: radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0) 55%);
        }
    </style>
    <nav id="header" class="header">
        <div class="header-top">
            <div class="htop_div htop_index">
                <i class="fa htop-fa fa-home" aria-hidden="true"></i>
            </div>
            <div class="htop_div htop_logo">
                一冉再的商城
            </div>
            <div class="htop_div htop_search">
                <i class="fa htop-fa fa-search" aria-hidden="true"></i>
            </div>
            <div class="htop_div htop_cart">
                <i class="fa htop-fa fa-shopping-cart" aria-hidden="true"></i>
            </div>
            <div style="clear: both"></div>
        </div>
        <div class="header-wp">
            <nav class="hots-bar">
                <div class="hots-wp">
                    {{--<a class="hot hot-all active">仿制</a>--}}
                    <div class="hots-cnt">
                        <div class="clearfix hots-bd">
                            <a href="/user/order/list" class="hot hot-active hot-key000">全部订单</a>
                            @foreach($nav as $k => $v)
                                <a href="{{$v[1]}}" class="hot hot-key{{$k}}">{{$v[0]}}</a>
                            @endforeach
                        </div>
                    </div>
                    {{--<a class="hot hot-more hot-more-open" href="javascript:;"></a>--}}
                </div>
            </nav>
        </div>
        {{--<div class="color_bar"></div>--}}
    </nav>
    <div style="clear: both;height: 14vh;width: 100vw;"></div>
    {{--<div class="color_bar"></div>--}}
    <script>
        // loading.hide()
        $(".hot").on('click', function () {
            var $a = $(this)
            $(".hot").attr("class", "hot")
            $a.attr("class", "hot hot-active")
            loading.show()
        })
        $("a.hot-key{{$active}}").click()
        loading.hide()
        $(".htop_search").click(function () {
            loading.show()
            window.location.href = '/search'
        })
        $(".htop_cart").click(function () {
            loading.show()
            window.location.href = '/cart'
        })
        $(".htop_index").click(function () {
            loading.show()
            window.location.href = '/'
        })
    </script>
@endsection